import { ToolbarEventType } from '@app-nextmesh/types';
import { events } from '@app-nextmesh/utils';
import { Popover, Tooltip } from '@mui/material';
import { useEffect, useState } from 'react';
import { IToolDropdownOption } from '../../components/types';
import IconRenderSurfaces from './icon/IconRenderSurfaces.svg';
import IconRenderSurfacesAndWireFrames from './icon/IconRenderSurfacesAndWireFrames.svg';
import IconRenderTranslucent from './icon/IconRenderTranslucent.svg';
import IconRenderWireframes from './icon/IconRenderWireframes.svg';

import './style.scss';

// icon对照表
const iconMap = {
  IconRenderSurfaces: IconRenderSurfaces,
  IconRenderWireframes: IconRenderWireframes,
  IconRenderTranslucent: IconRenderTranslucent,
  IconRenderSurfacesAndWireFrames: IconRenderSurfacesAndWireFrames,
};

interface Props {
  options: Array<IToolDropdownOption>;
}

export default function Dropdown({ options }: Props) {
  const [show, setShow] = useState(false);
  const [actOpt, setActOpt] = useState<IToolDropdownOption>(null);
  const [opts, setOpts] = useState([...options]);
  // 用于锚定Popover显示的位置
  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
  const openDropdown = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
    setShow(true);
  };
  const closeDropdown = () => {
    setAnchorEl(null);
    setShow(false);
  };

  useEffect(() => {
    const actOpts = options.filter((item) => item.isActived);
    setActOpt(actOpts[0]);

    const activeOption = options.filter((item) => item.isActived);
    if (activeOption && activeOption.length > 0) {
      events.emit(ToolbarEventType.ChangeRenderMode, activeOption[0].value);
    }
  }, []);

  const handleDropdownItemClick = (e, option: IToolDropdownOption) => {
    options.forEach((option) => {
      option.isActived = false;
    });
    option.isActived = true;
    setOpts([...options]);
    setActOpt({ ...option });
    closeDropdown();
    events.emit(ToolbarEventType.ChangeRenderMode, option.value);
  };

  const ButtonIcon = ({ option }) => {
    if (option) {
      const { icon } = option;
      return (
        <span
          className='nm-VTbutton-icon'
          style={{ backgroundImage: `url(${iconMap[icon]}` }}></span>
      );
    }
    return <></>;
  };

  return (
    <li className='nm-ViewerToolbar-item'>
      <div className='dropdown'>
        <Tooltip
          title='切换渲染模式'
          enterDelay={500}
          arrow>
          <button
            className={`nm-VTbutton nm-VTbutton--hasDropdown ${show ? 'nm-VTbutton--dropDownOpen' : ''}`}
            onClick={openDropdown}>
            <ButtonIcon option={actOpt} />
          </button>
        </Tooltip>
        <Popover
          open={show}
          anchorEl={anchorEl}
          onClose={closeDropdown}
          anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'left',
          }}>
          {opts.map((option) => {
            return (
              <div key={option.value}>
                <Tooltip
                  title={option.label}
                  placement='right'
                  enterDelay={500}
                  arrow>
                  <button
                    className={`nm-VTbutton--dropdownItem btn nm-VTbutton ${option.isActived ? 'nm-VTbutton--isActive' : ''}`}
                    id={option.value}
                    onClick={(e) => handleDropdownItemClick(e, option)}>
                    <ButtonIcon option={option} />
                  </button>
                </Tooltip>
              </div>
            );
          })}
        </Popover>
      </div>
    </li>
  );
}
